<template>
  <div id="opeNoticeList">
    <h1 class="con-right-title">
      运营审核
    </h1>
    <!-- 顶部搜索栏 -->
    <top-search :form-inline="formInline" @toSearch="toSearch"></top-search>

    <div class="table-conBtn">
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 下部table -->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      max-height="490"
      ref="table"
    >
      <el-table-column type="index" width="60" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="id"
        label="通知编号（ID）"
        width="220"
        align="center"
      ></el-table-column>
      <el-table-column prop="touchType" label="触达通道" width="120">
        <template slot-scope="scope">
          <span
            v-if="scope.row.touchType"
            class="tag-span"
            :class="scope.row.touchType | filterClass('touchType')"
            >{{ scope.row.touchType | filterName('touchType') }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        :show-overflow-tooltip="true"
        label="标题"
        width="160"
      ></el-table-column>
      <el-table-column
        prop="createdDate"
        label="创建时间"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="user.name"
        label="发布者"
        width="160"
      ></el-table-column>
      <el-table-column label="发布状态" width="160">
        <template slot-scope="scope">
          <span
            v-if="scope.row.noticeAuditing.twoAuditing.auditingState === 'PASS'"
            >已发布</span
          >
          <span v-else>未发布</span>
        </template>
      </el-table-column>
      <el-table-column prop="secondStatus" label="二审状态" width="140">
        <template slot-scope="scope">
          <span
            v-if="scope.row.noticeAuditing.twoAuditing.auditingState === 'PASS'"
            class="tag-span primary"
            >通过</span
          >
          <span
            v-if="
              scope.row.noticeAuditing.twoAuditing.auditingState === 'UNAUDITED'
            "
            class="tag-span warning"
            >未审核</span
          >
          <span
            v-if="scope.row.noticeAuditing.twoAuditing.auditingState === 'FAIL'"
            class="tag-span danger hand"
            @click="noticeMessage(scope.row.noticeAuditing.twoAuditing.remark)"
            >未通过</span
          >
        </template>
      </el-table-column>
      <el-table-column label="发布时间" width="170" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.noticeAuditing.twoAuditing.createdTime">{{
            scope.row.noticeAuditing.twoAuditing.createdTime | timeToTime()
          }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <template
            v-if="
              scope.row.noticeAuditing.twoAuditing.auditingState === 'UNAUDITED'
            "
          >
            <el-button type="text" @click="auditSuccess(scope.row.id)">
              审核通过
            </el-button>
            <el-button type="text" @click="auditFail(scope.row.id)">
              不通过
            </el-button>
          </template>
          <el-button type="text" @click="openDetail(scope.row.id)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 审核不通过对话框 -->
    <audit-fail-dialog
      v-if="auditFailDialogData.isShow"
      :audit-fail-dialog-data="auditFailDialogData"
      from="opeNotice"
      @refresh="refresh"
    ></audit-fail-dialog>
    <!-- 详情弹窗 -->
    <detail-dialog
      v-if="detailDialogData.isShow"
      :detail-dialog-data="detailDialogData"
    ></detail-dialog>
    <!-- 身份验证弹窗 -->
    <authentication-dialog
      :auth-dialog-data="authDialogData"
      from="notice"
    ></authentication-dialog>
  </div>
</template>
<script>
import { getSearchList, passRequestAPI } from '@/api/noticeManagement/opeNotice' // 接口
import topSearch from '@component/noticeManagement/opeNotice/topSearch' // 上部搜索
import auditFailDialog from '@component/noticeManagement/common/auditFailDialog' // 审核不通过公共组件
import detailDialog from '@component/noticeManagement/opeNotice/detailDialog' // 查看详情
import authenticationDialog from '@component/common/authenticationDialog' // 公共身份验证框
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'opeNoticeList',
  msg: '运营审核',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    detailDialog,
    auditFailDialog,
    authenticationDialog
  },
  data() {
    return {
      loading: false,
      total: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        timeType: '',
        createTime: [],
        searchContent: '',
        pubState: '', // 通知状态
        twoAuditingState: '', // 二审状态,默认全部
        touchType: '', // 触达通道,默认全部
        startTime: '', // 开始时间
        endTime: '' // 结束时间
      },
      // 表格数据
      tableData: [],
      // 审核不通过对话框
      auditFailDialogData: {
        isShow: false, // 控制不通过对话框显示
        params: '' // 传递的参数
      },
      // 详情弹窗
      detailDialogData: {
        isShow: false,
        noticeId: ''
      },
      // 身份验证弹窗
      authDialogData: {
        isShow: true,
        params: ''
      }
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    // this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      let params = { ...this.formInline, ...this.searchParams }
      delete params.createTime
      getSearchList(
        params,
        (response) => {
          this.tableData = response.rows
          this.total = response.total
          this.loading = false
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 点击未通过 显示原因
    noticeMessage(res) {
      this.$alert(`${res}`, '系统提示', {
        confirmButtonText: '确定',
        type: 'warning'
      })
    },
    // 审核不通过
    auditFail(id) {
      this.auditFailDialogData.isShow = true
      this.auditFailDialogData.params = id
    },
    // 审核通过
    auditSuccess(id) {
      this.$confirm('确定审核通过该条通知信息吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        passRequestAPI(
          id,
          (response) => {
            this.searchList()
          },
          (response) => {
            this.$message({
              message: '审核通过',
              type: 'warning'
            })
          }
        )
      })
    },
    // 编辑通知
    editNotice(row) {},
    // 查看详情
    openDetail(noticeId) {
      this.detailDialogData.isShow = true
      this.detailDialogData.noticeId = noticeId
    },
    /* 刷新列表 */
    refresh() {
      this.toSearch()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less">
#opeNoticeList {
  .hand {
    cursor: pointer;
  }
  .tag-success {
    background: #1dc8a4;
  }
}
</style>
